<template>
  <div class="auth-container">
    <div class="auth-card">
      <h2><i class="fas fa-chart-line mr-2"></i>区块链证券交易所</h2>
      
      <div v-if="errorMessage" class="alert alert-danger">
        {{ errorMessage }}
      </div>
      
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label>用户名</label>
          <input 
            type="text" 
            class="form-control" 
            v-model="formData.username"
            placeholder="请输入用户名"
            required
          />
        </div>
        
        <div class="form-group">
          <label>密码</label>
          <input 
            type="password" 
            class="form-control" 
            v-model="formData.password"
            placeholder="请输入密码"
            required
          />
        </div>
        
        <button type="submit" class="btn btn-primary" :disabled="loading">
          <span v-if="loading">
            <i class="fas fa-spinner fa-spin mr-2"></i>登录中...
          </span>
          <span v-else>
            <i class="fas fa-sign-in-alt mr-2"></i>登录
          </span>
        </button>
      </form>
      
      <div class="text-center mt-3">
        <p class="text-muted">还没有账号？</p>
        <router-link to="/register" class="btn btn-outline-primary">
          <i class="fas fa-user-plus mr-2"></i>注册新账号
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const formData = ref({
  username: '',
  password: ''
})

const loading = ref(false)
const errorMessage = ref('')

const handleLogin = async () => {
  loading.value = true
  errorMessage.value = ''
  
  try {
    const response = await authStore.login(formData.value)
    
    if (response.success) {
      router.push('/')
    } else {
      errorMessage.value = response.message
    }
  } catch (error) {
    errorMessage.value = '登录失败，请稍后重试'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.auth-card {
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>




